<script setup lang="ts">
// /file_box?key=123456&pwd=abcdef
import { useRoute, useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
import Request from '@/api/axios';
import { HttpStatusCode } from 'axios';
import { message } from 'ant-design-vue';

const route = useRoute();
const router = useRouter();

const key = route.query.key as string;
const pwd = route.query.pwd as string;

const loading = ref(true);
const fileInfo = ref<any>(null);
const errorMsg = ref('');
const inputPwd = ref(pwd || '');
const needPwd = ref(false);

const fetchFileInfo = async () => {
    loading.value = true;
    errorMsg.value = '';
    try {
        const res = await Request.get({
            url: '/file/info',
            params: { key, pwd: inputPwd.value }
        });
        if (res.code === HttpStatusCode.Ok) {
            fileInfo.value = res.info;
            needPwd.value = false;
        } else if (res.code === 401) {
            needPwd.value = true;
            errorMsg.value = '需要提取码';
        } else {
            errorMsg.value = '文件不存在或已失效';
        }
    } catch (e: any) {
        errorMsg.value =  '请求失败';
    }
    loading.value = false;
};

const handlePwdSubmit = () => {
    fetchFileInfo();
};

const handleDownload = async () => {
    if (!fileInfo.value) return;
    try {
        window.open(fileInfo.value.downloadUrl, '_blank');
    } catch (e) {
        message.error('下载失败');
    }
};

onMounted(() => {
    if (!key) {
        message.error('缺少文件密钥');
        router.push({name : 'file'});
        return;
    }
    fetchFileInfo();
});
</script>

<template>
    <div class="file-carrier-container">
        <div class="file-card">
            <h2>文件分享</h2>
            <div v-if="loading" class="loading">加载中...</div>
            <div v-else>
                <div v-if="errorMsg" class="error-msg">{{ errorMsg }}</div>
                <div v-else-if="needPwd">
                    <a-input
                        v-model:value="inputPwd"
                        placeholder="请输入提取码"
                        style="width: 200px; margin-bottom: 12px;"
                        @pressEnter="handlePwdSubmit"
                    />
                    <a-button type="primary" @click="handlePwdSubmit">确认</a-button>
                </div>
                <div v-else-if="fileInfo">
                    <div class="file-info">
                        <div><b>文件名：</b>{{ fileInfo.name }}</div>
                        <div><b>大小：</b>{{ (fileInfo.size / 1024).toFixed(2) }} KB</div>
                        <div><b>上传者：</b>{{ fileInfo.uploader || '匿名' }}</div>
                        <div><b>上传时间：</b>{{ fileInfo.uploadTime }}</div>
                    </div>
                    <a-button type="primary" @click="handleDownload" style="margin-top: 18px;">
                        下载文件
                    </a-button>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.file-carrier-container {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f9fb;
}
.file-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    padding: 36px 32px 28px 32px;
    min-width: 320px;
    max-width: 90vw;
}
.file-card h2 {
    text-align: center;
    margin-bottom: 24px;
    font-weight: 700;
}
.file-info {
    margin-bottom: 12px;
    color: #444;
    font-size: 1.05rem;
    line-height: 2;
}
.loading {
    text-align: center;
    color: #888;
}
.error-msg {
    color: #e74c3c;
    margin-bottom: 12px;
    text-align: center;
}
</style>